<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>

  <meta charset="utf-8">
  <title>学员案例</title>
  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts字体 -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
  /*修改table表中的toolbar高度，z-index*/
    [lay-id=table_school] .layui-table-tool {
      position: relative;
      z-index: 40;
      width: 100%;
      min-height: 50px;
      line-height: 30px;
      padding: 10px 15px;
      border-width: 0;
      border-bottom-width: 1px;
    }

    /*修改table表中的右侧查看高度，z-index*/
    div.layui-table-fixed {

      z-index: 45;
    }

    .layui-form-select .layui-input{
      padding-right: 0;
    }

    .self_nav{
      padding:0 13px;
      background-color:#393D49;
      color:#fff;
      border-radius:2px;
      position:relative;
      *zoom:1;
      line-height:65px
    }
    .self_high{
      line-height:65px
    }
    .self_bottom{
       margin-bottom: 0;

    }
    .broad{
      margin-right: 10px;
    }
    .top_table {
      position: fixed;
      z-index: 100;
    }


  </style>
  <script type="text/html" id="bar_detail" style="z-index: 100">

<!--    <a class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs" lay-event="detail">查看</a>-->
<!--    <a class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs layui-btn-disabled" lay-event="detail">查看</a>-->
    <!--根据是否存在url判断是否有按钮键-->
    {{# if(d.url.length > 0){ }}
    <a class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs" lay-event="detail">查看</a>
    {{# }if(d.url == null || d.url.length == 0) { }}
    <button class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs layui-btn-disabled" lay-event="detail">查看</button>
    {{# } }}
  </script>


</head>

<body>
<!-- ======= Top Bar如果需要可以扩展 保留位置 ======= -->
<!-- ======= Header ======= -->
<header id="header" style="z-index: 10000">
  <div class="container">

    <div class="logo float-left">
      <h1 class="text-light"><a href="/temp"><span>多宝留学</span></a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="temp.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
    </div>

    <nav class="nav-menu float-right d-none d-lg-block">
      <ul>
        <li ><a href="/temp">首页 <i class="la la-angle-down"></i></a></li>
        <li class="active"><a href="/sample">案例分享</a></li>
        <li><a href="/team">多宝团队</a></li>
        <li><a href="/contact">联系方式</a></li>
      </ul>
    </nav>
  </div>
</header><!-- End Header -->

<section style="background: #fff;
  padding: 0 0 0 0;">
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--  <legend>全部学员案例</legend>-->
<!--</fieldset>-->
<div class="layui-form self_nav" style="color:#000;">
  <!--<div class="layui-form-item" style="color:#000;">-->
    <div class="layui-inline" style="margin-bottom: 0">
      <div class="layui-input-inline" >
        <select name="nation_area" id="s_nation" >
          <option value="0" selected="selected">--请选择 国家/地区--</option>
          <option value="不限">不限</option>
          <option value="英国">英国</option>
          <option value="意大利">意大利</option>
          <option value="香港">香港</option>
          <option value="新加坡">新加坡</option>
          <option value="美国">美国</option>
          <option value="马来西亚">马来西亚</option>
          <option value="澳门">澳门</option>
          <option value="荷兰">荷兰</option>
        </select>
      </div>
    </div>

    <div class="layui-inline broad" style="margin-bottom: 0">
      <div class="layui-input-inline">
        <select name="major" id="s_major" lay-bar="disabled" >
          <option value="0" selected="selected">--请选择 专业--</option>
          <option value="不限">不限</option>
          <option value="语言学">语言学</option>
          <option value="市场营销">市场营销</option>
          <option value="数据科学类">数据科学类</option>
          <option value="化学工程">化学工程</option>
          <option value="教育学">教育学</option>
          <option value="工业工程">工业工程</option>
          <option value="法学">法学</option>
          <option value="公共卫生管理">公共卫生管理</option>
          <option value="经济学">经济学</option>
          <option value="金融学">金融学</option>
          <option value="医学">医学</option>
          <option value="/">/</option>
          <option value="数学类">数学类</option>
          <option value="工商管理">工商管理</option>
          <option value="信息系统">信息系统</option>
          <option value="国际事务与国际关系">国际事务与国际关系</option>
          <option value="哲学">哲学</option>
          <option value="能源工程">能源工程</option>
          <option value="工程管理">工程管理</option>
          <option value="会计学">会计学</option>
        </select>
      </div>
    </div>

<!--    <div class="layui-inline" style="margin-bottom: 1px">-->
<!--      <div class="layui-input-inline">-->
<!--    <button data-type="reload" class="layui-btn layui-btn-sm layui-btn-normal" id="submit-reload">提交</button>-->
<!--</div>-->
<!--</div>-->
<!--  </div>-->

</div>
<div>
<table class="layui-hide" id="student_data" lay-filter="table_filter"></table>
</div>
</section>
<!-- ======= Footer ======= -->
<footer id="footer">

  <div class="container">
    <div class="copyright">
      &copy; Copyright <strong><span>DoBooeducation</span></strong>. All Rights Reserved
    </div>
  </div>
</footer>

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<script type="text/html" id="toolbarSelfDef">
  <div class="layui-btn-container" style="z-index: 40">
        <button data-type="reload" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="submit_select">提交筛选</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="reset">重置筛选</button>

    <!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
  </div>
</script>

<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>



  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#student_data'
      ,id: 'table_school'
      ,height: 700
      ,title: '数据表'
      ,page: true //开启分页
      ,toolbar: '#toolbarSelfDef' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      // ,defaultToolbar: ['exports','print']
      ,defaultToolbar: []
      ,url:'/data/allData'
      ,type: 'get'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,limit: 40
      ,limits : [ 15, 20, 30, 40 ]
      ,cols: [
              [
         // {type: 'checkbox', fixed: 'left'}
        {field:'id', width:80, title: 'ID', sort: true, hide: true}
        ,{field:'nation_area', width:120, title: '国家/地区'}
        ,{field:'undergraduate_college', width:150, title: '录取院校'}
        ,{field:'major', width:150, title: '专业'}
        ,{field:'major_categories', title: '专业大类', width:120} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
        ,{field:'enrollment_year', width:110, title: '入读年份', sort: true}
        ,{field:'detail', width:200, title: '录取专业详情'}
        ,{field:'student_name', width:120, title: '学生姓名'}
        ,{field:'college', width:140, title: '本科院校'}
        ,{field:'college_major', width:120, title: '本科专业'}
        ,{field:'gpa', width:200, title: 'gpa', sort: false}
        ,{field:'chosen', width:140, title: '入读学校', sort: false}
        ,{field:'soft_background', width: '50%', minWidth: 100, title: '软背景'}
        ,{field:'url', width: '50%',hide:true, minWidth: 100, title: 'url'}
        ,{title:'链接',fixed: 'right', width: 80, align:'center', style:"z-index:40", toolbar: '#bar_detail'}
      ]
      ]
    });
    // 监听筛选选项
    // var $ = layui.$,active={
    //   reload:function (){
    //     var s_nation= $('#s_nation');
    //     var s_major= $('#s_major');
    //     if (s_nation.val()==='0' || s_major.val()==='0')
    //       layer.alert("您的筛选条件不完整，请重新填写",{icon: 2,time:4000});
    //     table.reload('table_school',{
    //       url: 'data/selData'
    //       ,page: {
    //         curr:1
    //       }
    //       ,where:{
    //         nation_area:s_nation.val(),
    //         major:s_major.val()
    //       }
    //             },'data'
    //
    //     );
    //   }
    // };
    // //触发按钮
    // $('#submit-reload').on('click',function (){
    //   var type=$(this).data('type');
    //   active[type] ? active[type].call(this) : '';
    // });

    //监听头工具栏事件
    table.on('toolbar(table_filter)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
              ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          layer.msg('添加');
          break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
          }
          break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
          break;
        case 'reset':
          table.reload('table_school',{
                    url: 'data/selData'
                    ,page: {
                      curr:1
                    }
                    ,where:{
                      nation_area:"不限",
                      major:"不限"
                    }
                  },'data'
          );
          layer.msg('已重置筛选数据！',{time:1000});
          break;
        case 'submit_select':
          var s_nation= $('#s_nation');
          var s_major= $('#s_major');
          if (s_nation.val()==='0' || s_major.val()==='0'){
            layer.alert("您的筛选条件不完整，请重新填写",{icon: 2,time:4000});
            break;
          }
          table.reload('table_school',{
                    url: 'data/selData'
                    ,page: {
                      curr:1
                    }
                    ,where:{
                      nation_area:s_nation.val(),
                      major:s_major.val()
                    }
                  },'data'
          );
          layer.msg('数据已更新',{time:1000});
          break;

      };
    });

    //监听行工具事件
    table.on('tool(table_filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              ,layEvent = obj.event; //获得 lay-event 对应的值
      if(layEvent === 'detail'){
        let id = obj.data.id;
        // 如果为禁用，不做操作
        if (obj.data.url != null && obj.data.url.length !== 0){
        // console.log(id);
        $.ajax({
          url:"/data/getUrl",
          data:{'id':id},
          type:"get",
          dataType:"json",
          headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
          success:function(data){
           let url = data.result;
           if (data.result != null && data.result.length > 0){
             layer.alert("正在为您跳转到微信页！",{icon: 1,time:4000});
             window.location.href=url;
           } else {
             layer.alert("微信链接地址不存在！",{icon: 2,time:4000});
           }
          },
          error:function(data){
            layer.alert(JSON.stringify(data), {
              title: data
            });
          }
        });
        }

      } else if(layEvent === 'more'){
        //下拉菜单
        dropdown.render({
          elem: this //触发事件的 DOM 对象
          ,show: true //外部事件触发即显示
          ,data: [{
            title: '编辑'
            ,id: 'edit'
          },{
            title: '删除'
            ,id: 'del'
          }]
          ,click: function(menudata){
            if(menudata.id === 'del'){
              layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(table_show);
                //向服务端发送删除指令
              });
            } else if(menudata.id === 'edit'){
              layer.msg('编辑操作，当前行 ID:'+ data.id);
            }
          }
          ,align: 'right' //右对齐弹出（v2.6.8 新增）
          ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        })
      }
    });

  });


</script>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>